<template>
	<view class="activityDetails">
		<view class="menu-box">
			<view :class="nowMenuId == item.status ? 'menu-now' : 'menu'" v-for="(item, index) in menu" :key="index" @click="menuClick(item.status)">
				{{item.title}}
			</view>
		</view>
		<view class="con-box" v-for="(item, index) in pageResult.list" :key="index" @click="jump('deposit_details',item.id)">
			<view class="con"> 
				<view class=""> {{item.withdraw_no}} </view>
				<view class=""> {{item.status_name}} </view>
			</view>
			<view class="con"> 
				<view class=""> 到账类型：{{item.type_name}} </view>
				<view class=""> 到账金额：{{item.money}} </view>
			</view>
			<view class="con" style="border: 0;"> 
				<view class=""> {{item.time}} </view>
				<view class="con-but" @click.stop="undo($event,index)" v-if="item.status == 1"> 撤销申请 </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				menu:[{title : '全部',status: '9'},{title : '申请中',status: '1'},{title : '已处理',status: '2'},{title : '已取消',status: '-1'},{title : '已驳回',status: '-2'}],
				
				nowMenuId : '9',
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					status: 9,
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
			}
		},
		methods: {
			/* 撤销申请确认弹框 */
			undo(e, key){
				e.preventDefault();
				uni.showModal({
					title: '提示',
					content: '确定取消当前业绩提现申请吗？',
					success: function (res) {
						if (res.confirm) {
							_self.cancel(key);
						} 
					}
				})
			},
			cancel(key) {
				let item = _self.pageResult.list[key];
				serve.request({
					url: '/spread/increase/cancel',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: item.id,
					}
				}).then(res => {
					let resuleCode = res.code;
					let resultMessage = res.message;
					uni.showToast({
						title: resultMessage,
						icon: 'none',
						success() {
							if(resuleCode == 200){
								item.status = -1;
								item.status_name = '已取消';
								_self.$forceUpdate();
							}
						}
					});
				});
			},
			menuClick(index){
				if(_self.pageParam.status == index) {
					return ;
				}
				_self.nowMenuId = index;
				_self.pageParam.status = index;
				_self.pageParam.page=0;
				_self.pageResult.list=[];
				_self.getList();
			},
			getList() {
				_self.pageParam.page++
				serve.request({
					url: '/spread/increase/list',
					data: _self.pageParam
				}).then(res => {
					console.log(res.data); 
					if (res.data && res.data.length > 0) {
						_self.pageResult.list=_self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 178;
			}
			_self = this;
			_self.nowMenuId = options.status || 9;
			_self.pageParam.status = options.status || 9;
			_self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped>
	.activityDetails {
		padding: 100rpx 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	
	.menu-box{
		position: fixed;
		top: 0;left: 0;
		width: 100vw;
		height: 100rpx;
		border-bottom: 2rpx solid #ededed;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-items: center;
	}
	.menu-now{
		padding: 10rpx 0;
		margin: 0rpx 2vw;
		width: 16vw;
		text-align: center;
		color: #FFBF0A;
		border-bottom: 6rpx solid #FFBF0A;
		
	}
	.menu{
		padding: 10rpx 0;
		margin: 0rpx 2vw;
		width: 16vw;
		text-align: center;
		color: #333;
	}
	
	
	.con-box{
		padding: 20rpx 0;
		border-bottom: 2rpx solid #ededed;
	}
	.con{
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx dashed #ededed;
	}
	
	
	.con-but{
		width: 120rpx;
		padding: 8rpx 18rpx;
		background: #f35353;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	.con-num{
		color: #f97977;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 46rpx;
	}
	
	

</style>
